import React, { useState } from "react";
import { Button } from "antd";
// 强化props  条件渲染 性能优化 事件赋能 反向继承
// 承接上层的props，混入到自己的props达到强化组件的作用
const HOC = (Component: any) => (props: any) => {
  return <Component name={"惠妹超级无敌"} {...props}></Component>;
};
//上面代码和下面一样
// var HOC = function (Component) {
//   return function (props) {
//     return React.createElement(
//       Component,
//       __assign({ name: "惠妹超级无敌" }, props)
//     );
//   };
// };

const Index: React.FC<any> = (props) => {
  const [flag, setFlag] = useState<boolean>(false); 

  return (
    <div>
      <Button type="primary" onClick={() => setFlag(true)}>
        获取props
      </Button>
      {flag && <div>{JSON.stringify(props)}</div>}
    </div>
  );
};

export default HOC(Index);
